D28

16th鐵人賽

max1112

2024-10-12 00:29:56

80 瀏覽

分享至

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guess the Number Game</title>

    <!-- 引用外部的 CSS 文件設計頁面樣式 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <h1>Guess the Number!</h1>

        <!-- 顯示遊戲提示和結果的區域 -->
        <p id="message">Guess a number between 1 and 100</p>

        <!-- 輸入框，讓玩家輸入他們的猜測 -->
        <input type="number" id="guess-input" placeholder="Enter your guess">
        
        <!-- 提交猜測按鈕 -->
        <button onclick="submitGuess()">Submit Guess</button>

        <!-- 顯示已經猜過的數字 -->
        <p>Previous guesses: <span id="previous-guesses"></span></p>

        <!-- 重玩遊戲按鈕（開始遊戲時是隱藏的） -->
        <button id="restart-button" onclick="restartGame()" style="display:none;">Restart Game</button>
    </div>

    <!-- 引用外部的 JavaScript 文件來處理遊戲邏輯 -->
    <script src="script.js"></script>
</body>
</html>

JavaScript

// 初始化變數
let randomNumber = Math.floor(Math.random() * 100) + 1; // 隨機生成1到100之間的數字
let guesses = [];  // 儲存玩家的猜測
let maxGuesses = 10; // 設定玩家最多可以猜10次

// 提交玩家的猜測
function submitGuess() {
    const guessInput = document.getElementById('guess-input');  // 取得輸入框
    const message = document.getElementById('message');         // 取得顯示消息的元素
    const previousGuesses = document.getElementById('previous-guesses'); // 取得顯示歷史猜測的元素

    const guess = Number(guessInput.value);  // 獲取玩家輸入的猜測

    // 驗證玩家的輸入是否合法（1到100之間）
    if (guess < 1 || guess > 100 || isNaN(guess)) {
        message.textContent = 'Please enter a valid number between 1 and 100.';
        return;
    }

    guesses.push(guess); // 將猜測加入猜測數組
    previousGuesses.textContent = guesses.join(', '); // 更新顯示之前的猜測

    // 判斷猜測結果
    if (guess === randomNumber) {
        message.textContent = `Congratulations! You guessed it right in ${guesses.length} tries.`;
        endGame();
    } else if (guesses.length === maxGuesses) {
        message.textContent = `Game over! The correct number was ${randomNumber}.`;
        endGame();
    } else if (guess < randomNumber) {
        message.textContent = 'Too low! Try again.';
    } else {
        message.textContent = 'Too high! Try again.';
    }

    // 清空輸入框
    guessInput.value = '';
}

// 結束遊戲，禁用輸入和顯示重玩按鈕
function endGame() {
    const guessInput = document.getElementById('guess-input');
    const restartButton = document.getElementById('restart-button');

    // 禁用輸入框
    guessInput.disabled = true;

    // 顯示重玩按鈕
    restartButton.style.display = 'block';
}

// 重啟遊戲
function restartGame() {
    // 重設變數
    randomNumber = Math.floor(Math.random() * 100) + 1;
    guesses = [];

    // 重置訊息與顯示
    document.getElementById('message').textContent = 'Guess a number between 1 and 100';
    document.getElementById('previous-guesses').textContent = '';
    document.getElementById('guess-input').disabled = false;
    document.getElementById('restart-button').style.display = 'none';
}

CSS

/* 頁面基本樣式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* 遊戲容器的樣式 */
.game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

/* 標題樣式 */
h1 {
    margin-bottom: 20px;
}

/* 輸入框樣式 */
input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* 按鈕樣式 */
button {
    padding: 10px;
    width: 100%;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

/* 已經猜過的數字區域樣式 */
#previous-guesses {
    margin-top: 10px;
    font-size: 14px;
}